<template>
  <div class="index">
    <div class="top">
      <h3>vue3 admin</h3>
      <div class="ooo">
         <div class="top-1">
        系统介绍
      </div>
      <div class="top-2">
        <el-popover placement="top" width="160" v-model="visible">
          <div class="top-p">
            登录名: admin
            <el-button
              class="but"
              type="primary"
              size="mini"
              @click="ts"
              >退出</el-button
            >
          </div>
          <div>昵称： 十三</div>
          <div slot="reference">
            <i class="el-icon-s-custom"></i>十三<i
              class="el-icon-caret-bottom"
            ></i>
          </div>
        </el-popover>
      </div>
      </div>
     
    </div>
    <el-col :span="12">
      <el-menu
        unique-opened
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#222832"
        text-color="#fff"
        active-text-color="#1BAE9E"
      >
        <el-submenu index="1">
          <template slot="title">
            <span>Dashboard</span>
          </template>
          <el-menu-item index="/xitong">系统介绍</el-menu-item>
          <el-menu-item index="/dash">Dashboard</el-menu-item>
          <el-menu-item index="/dashboard">Dashboard</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <span>首页配置</span>
          </template>
          <el-menu-item index="/swiper">轮播图配置</el-menu-item>
          <el-menu-item index="/rexiao">热销商品配置</el-menu-item>
          <el-menu-item index="/xinpin">新品上线配置</el-menu-item>
          <el-menu-item index="/tuijian">为你推荐配置</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <span>模块管理</span>
          </template>
          <el-menu-item index="/fenlei">分类管理</el-menu-item>
          <el-menu-item index="/shangpin">商品管理</el-menu-item>
          <el-menu-item index="/huiyuan">会员管理</el-menu-item>
          <el-menu-item index="/dingdan">订单管理</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <span>系统管理</span>
          </template>
          <el-menu-item index="/xuigai">修改密码</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
    <el-main>
      <div class="box">
        <router-view class="Router_view"></router-view>
      </div>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      visible: false,
    };
  },
  created() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    ts(){
      localStorage.removeItem("token");
      this.$router.push("/")
    }
  },
};
</script>

<style lang="scss" scoped>
.el-menu {
  width: 200px;
  height: 91vh;
}
.top {
  width: 100%;
  height: 60px;
  display: flex;
  h3 {
    width: 200px;
    height: 60px;
    background: #222832;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top-1 {
    width: 300px;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    font-size: 20px;
  // border-bottom: 1px solid #eee;

  }
  .top-2 {
    width: 120px;
    height: 60px;
    line-height: 60px;
    margin-left: 880px;
  // border-bottom: 1px solid #eee;

  }
  i {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.ooo{
  border-bottom: 1px solid #eee;
  display: flex;
}
 .el-col-12 {
    width: 12%;
}
</style>
